import { useState } from "react";
import AddTodo from "./AddTodo.tsx";
import TodoFilter from "./TodoFilter.tsx";
import TodoItem from "./TodoItem.tsx";

export default function ToDoList() {
    const [todos, setTodos] = useState([]);
    const onAddTodo = (title: string) => {
        setTodos([...todos, { id: todos.length + 1, title, completed: false }]);
    }
    const onTodoComplete = (id: number) => {
        setTodos(todos.map((todo: any) => todo.id === id ? { ...todo, completed: !todo.completed } : todo));
    }
    const onTodoDelete = (id: number) => {
        setTodos(todos.filter((todo: any) => todo.id !== id));
    }
    // const onFilter = (filter: string) => {
    //     if (filter === 'all') {
    //         setTodos(todos);
    //         return;
    //     }
    //     if (filter === 'active') {
    //         setTodos(todos.filter((todo: any) => !todo.completed));
    //         return;
    //     }
    //     if (filter === 'completed') {
    //         setTodos(todos.filter((todo: any) => todo.completed));
    //         return;
    //     }
    //     setTodos(todos);
    // }


    const [filter, setFilter] = useState('all');
    const filteredTodos = todos.filter((todo: any) => {
        if (filter === 'all') {
            return true;
        }
        if (filter === 'active') {
            return !todo.completed;
        }
        if (filter === 'completed') {
            return todo.completed;
        }
        return true;
    })
    return (
        <div>
            <h1>Todo List</h1>

            <AddTodo onAddTodo={onAddTodo} />
            <TodoFilter onFilter={setFilter} />
            {filteredTodos.map((todo:any) => (
                <TodoItem key={todo.id} {...todo}
                    onTodoComplete={onTodoComplete}
                    onTodoDelete={onTodoDelete}
                 />
            ))}


        </div>
    )
}